

<template>
  <div class="list">
      <div class="item" v-for="(item,index) in list" :key="index">
          <router-link class="link" :to="{name:'detail',params:{id:item._id},query:{title:item.title}} ">
              <div class="item-box">
                  <div class="line">
                      <div class="name center">
                        <van-icon name="user-o" /> {{ item.author.username }}
                      </div>
                      <div class="date center " :style="{color:type==2?'red':'#999'}">

                        <span >发布时间:{{ item.time | timeFormat(true) }}</span>
                      </div>
                  </div>
                  <div class="title mt5 row">
                    <van-icon name="fire" color="red" class="icon"></van-icon> <span :style="{color:type==1?'red':'#999'}">{{ item.hot }}</span>
                  </div>
                  <div class="title mt5 row">
                    <van-icon name="label-o" class="icon"></van-icon> <span>{{ item.title }}</span>
                  </div>
                  <div class="title mt5 row">
                    <van-icon name="clock-o" class="icon"></van-icon> <span>{{ item.date | timeFormat(false) }}</span>
                  </div>
                  <div class="campany mt5 row">
                    <van-icon name="cashier-o"  class="icon"></van-icon> <span>{{ item.campany }}</span>
                  </div>
                  <div class="address mt5 row">
                    <van-icon name="location-o"  class="icon"></van-icon> <span>{{ item.address }}</span>
                  </div>
                  <div class="level mt5 row">
                    <van-icon name="chart-trending-o "  class="icon"></van-icon>
                    <van-tag size="large"  :color="colors[loda.findIndex(levels,(v)=>v==item.level)] "> {{ item.level }} </van-tag>
                  </div>
                  <div class="tags mt5 row" v-if="item.tags.length>0">
                    <p>面试标签:</p>
                    <div class="mt5">
                      <van-tag class="tag" size="large" round type="success"   v-for="(val,index) in item.tags">  {{ val.value }} </van-tag>
                    </div>
                  </div>
                  <div class="imgs mt5 row">
                    <p>面试图片:</p>
                    <div class="mt5" v-if="item.imgs[0].url">
                      <img class="bigimg" v-lazy="item.imgs[0].url.replace(/public/,baseURL)"   alt="">
                    </div>

                  </div>

                  <!-- <div class="tags mt5 row" v-if="item.audioSrc">
                    <p>面试录音:</p>
                    <div class="mt5 audio">
                      <audio  controls :src="item.audioSrc.replace(/public/,baseURL)" ></audio>
                    </div>
                  </div>

                  <div class="ques mt5 row" >
                    <p>面试题目:</p>
                    <div class="mt5">
                      <van-cell-group >
                        <van-cell :title="'第'+(index+1)+'题'" v-for="(item,index) in item.quesList.slice(0,2)" :key="index" icon="label-o" :value="item.value"      />
                      </van-cell-group>
                    </div>
                  </div> -->

                  <div class="actions mt10 row">
                      <div class="cit">
                        <van-icon name="like-o" /> <span>{{ item.likes }}</span>
                      </div>
                      <div class="cit">
                        <van-icon name="star-o" /> <span>{{ item.collects }}</span>
                      </div>
                      <div class="cit">
                        <van-icon name="comment-o" /> <span>{{ item.pings }}</span>
                      </div>
                  </div>
              </div>
          </router-link>
      </div>
  </div>
</template>


<script>
export default {
  props:['list','type'],
  data(){
    return {

    }
  },
  methods:{

  },
  mounted(){

  }
}
</script>

<style lang="scss" scoped >
.title, .campany , .address{
  color:#000;
  font-size:16px;
  font-weight: 500;
}
.audio{
  background:#fff;
  padding:8px;
  display: flex;
  justify-content: center;
}
.actions{

  width:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top:10px;

}
.imgs{

    .sbox{
      display: flex;
      flex-wrap: wrap;
      width:100%;
    }
    .simg{
      width:100px;
      height:100px;
      border-radius: 10px;
      margin:0px 10px 10px 0;
    }
  .bigimg{
    width:100%;
    height:300px;
    border-radius: 10px;
  }
}
.tag{
  margin:3px 3px 0 0 ;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.list{
  padding:15px 15px;
  background: #f4f4f4;
  .item{
    margin-top:20px;
    background: #fff;
    border-radius: 10px;
    padding:10px;

    .link{
      color:#666;
      .line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:0.5px solid #ddd;
        padding-bottom:5px;
      }
      .name{
        font-weight: 600;
      }
      .row{
        .icon{
          margin-right:4px;
        }
      }
    }
  }
}
</style>
